<script setup lang="ts">
import {watch} from 'vue'
import {useTheme} from '@/composables/useTheme'
import {useSettingsStore} from '@/stores/settings'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {storeToRefs} from 'pinia'

const {setTheme} = useTheme()
const settingsStore = useSettingsStore()
const {settings} = storeToRefs(settingsStore)

watch(() => settings.value.appearance.theme, (newTheme) => {
  setTheme(newTheme)
})
</script>

<template>
  <el-config-provider :locale="zhCn">
    <router-view class="app-container"/>
  </el-config-provider>
</template>

<style>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: v-bind('settingsStore.settings.appearance.fontFamily');
  font-size: v-bind('settingsStore.settings.appearance.fontSize + "px"');
}

#app {
  width: 100%;
  height: 100%;
}

.app-container {
  width: 100%;
  height: 100%;
}

:root {
  --el-color-primary: v-bind('settingsStore.settings.appearance.colors.primary');
  --el-color-success: v-bind('settingsStore.settings.appearance.colors.success');
  --el-color-warning: v-bind('settingsStore.settings.appearance.colors.warning');
  --el-color-danger: v-bind('settingsStore.settings.appearance.colors.danger');
  --el-color-info: v-bind('settingsStore.settings.appearance.colors.info');
}

/* 主题相关样式 */
html[data-theme='dark'] {
  color-scheme: dark;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}

html[data-theme='light'] {
  color-scheme: light;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-primary);
}
</style>
